<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>巷陌发现 - 忘记密码</title>
  <link rel="stylesheet" href="../static/layui/css/layui.css">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fDE2OTM4NzUyNjV8fHx8&auto=format&fit=crop&w=1470&q=80') no-repeat center center fixed;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .forget-pwd-container {
      width: 400px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      padding: 30px;
    }

    .forget-pwd-title {
      text-align: center;
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
      position: relative;
    }

    .forget-pwd-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #ff6b6b, #ffa502, #48dbfb);
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      font-size: 14px;
      color: #555;
      margin-bottom: 8px;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
      transition: border-color 0.3s;
    }

    .form-group input:focus {
      border-color: #6a11cb;
      outline: none;
    }

    .find-pwd-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(90deg, #6a11cb, #2575fc);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .find-pwd-btn:hover {
      background: linear-gradient(90deg, #5a0dc8, #1a69e0);
    }

    .other-options {
      text-align: center;
      margin-top: 20px;
    }

    .other-options a {
      color: #6a11cb;
      text-decoration: none;
      margin: 0 10px;
      font-size: 14px;
      transition: color 0.3s;
    }

    .other-options a:hover {
      color: #5a0dc8;
    }

    .verify-code-layer {
      display: none;
    }

    .verify-code-form .form-group {
      margin-bottom: 15px;
    }

    .verify-code-form label {
      display: inline-block;
      width: 60px;
    }

    .verify-code-form input {
      display: inline-block;
      width: calc(100% - 70px);
    }

    .verify-code-form .input-row {
      display: flex;
      align-items: center;
    }

    .verify-code-form #verifyCode {
      flex: 1;
      margin-right: 10px;
    }

    .verify-code-form .send-code-btn {
      padding: 10px 15px;
      background: linear-gradient(90deg, #6a11cb, #2575fc);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .verify-code-form .send-code-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    .verify-code-form .send-code-btn:hover:not(:disabled) {
      background: linear-gradient(90deg, #5a0dc8, #1a69e0);
    }

    .verify-code-form .submit-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(90deg, #6a11cb, #2575fc);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .verify-code-form .submit-btn:hover {
      background: linear-gradient(90deg, #5a0dc8, #1a69e0);
    }

    .verify-code-form #displayPhone {
      font-size: 16px; /* 放大手机号字体大小 */
    }
  </style>
</head>

<body>
  <div class="forget-pwd-container">
    <h2 class="forget-pwd-title">忘记密码</h2>
    <div class="form-group">
      <label>用户名：</label>
      <input type="text" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
      <label>新密码：</label>
      <input type="password" id="newPassword" placeholder="请输入新密码">
    </div>
    <div class="form-group">
      <label>确认密码：</label>
      <input type="password" id="confirmPassword" placeholder="请确认新密码">
    </div>
    <div class="form-group">
      <label>手机号：</label>
      <input type="text" id="phone" placeholder="请输入手机号码">
    </div>
    <button class="find-pwd-btn" id="findPwdBtn">找回密码</button>
    <div class="other-options">
      <a href="#" id="registerLink">注册</a>
      <a href="#" id="forgetPwdLink">忘记密码</a>
    </div>
  </div>

  <!-- 验证码弹出层 -->
  <div class="layui-layer verify-code-layer" id="verifyCodeLayer">
    <div class="verify-code-form">
      <div class="form-group">
        <label>手机号：</label>
        <span id="displayPhone"></span>
      </div>
      <div class="form-group">
        <label>验证码：</label>
        <div class="input-row">
          <input type="text" id="verifyCode" placeholder="请输入验证码">
          <button class="send-code-btn" id="sendVerifyCodeBtn">发送验证码</button>
        </div>
      </div>
      <button class="submit-btn" id="submitVerifyBtn">提交</button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
  <script>
    layui.use(['layer'], function () {
      var layer = layui.layer;
      var countdown = 30;
      var countdownTimer = null;
      var phoneNumber = '';

      // 找回密码按钮点击事件
      $('#findPwdBtn').click(function () {
        var username = $('#username').val().trim();
        var newPassword = $('#newPassword').val().trim();
        var confirmPassword = $('#confirmPassword').val().trim();
        phoneNumber = $('#phone').val().trim();

        if (username === '') {
          layer.msg('请输入用户名');
          return;
        }

        if (newPassword === '') {
          layer.msg('请输入新密码');
          return;
        }

        if (confirmPassword === '') {
          layer.msg('请确认新密码');
          return;
        }

        if (newPassword !== confirmPassword) {
          layer.msg('两次输入的密码不一致');
          return;
        }

        if (phoneNumber === '') {
          layer.msg('请输入手机号码');
          return;
        }

        // 简单验证手机号格式（可根据需求完善）
        if (!/^1[3-9]\d{9}$/.test(phoneNumber)) {
          layer.msg('请输入正确的手机号码');
          return;
        }

        // 显示手机号
        $('#displayPhone').text(phoneNumber);
        // 弹出验证码层，调整位置为居中
        layer.open({
          type: 1,
          title: '验证码验证',
          content: $('#verifyCodeLayer'),
          area: ['350px', 'auto'],
          offset: 'auto', // 自动居中
          success: function (layero, index) {
            $('#verifyCodeLayer').show();
          },
          end: function () {
            $('#verifyCodeLayer').hide();
          }
        });
      });

      // 发送验证码按钮点击事件（弹出层内）
      $('#sendVerifyCodeBtn').click(function () {
        // 简单验证手机号格式（可根据需求完善，这里因为是从之前输入获取的，可适当简化）
        if (!phoneNumber || !/^1[3-9]\d{9}$/.test(phoneNumber)) {
          layer.msg('手机号异常，请重新操作');
          return;
        }

        // 开始倒计时
        $(this).prop('disabled', true);
        $(this).text(countdown + '秒后重新发送');
        countdownTimer = setInterval(function () {
          countdown--;
          $('#sendVerifyCodeBtn').text(countdown + '秒后重新发送');
          if (countdown <= 0) {
            clearInterval(countdownTimer);
            $('#sendVerifyCodeBtn').prop('disabled', false);
            $('#sendVerifyCodeBtn').text('发送验证码');
            countdown = 30;
          }
        }, 1000);

        // 这里可以添加发送验证码的请求逻辑，目前只是模拟
        layer.msg('验证码已发送，请注意查收', { icon: 6 });
      });

      // 提交按钮点击事件（弹出层内）
      $('#submitVerifyBtn').click(function () {
        var verifyCode = $('#verifyCode').val().trim();

        if (verifyCode === '') {
          layer.msg('请输入验证码');
          return;
        }

        // 这里可以添加验证码验证及密码修改的请求逻辑，目前只是模拟
        layer.msg('密码修改中...', { icon: 16, shade: 0.3, time: 1000 }, function () {
          layer.msg('密码修改成功', { icon: 6 }, function () {
            // 关闭弹出层
            layer.closeAll();
          });
        });
      });

      // 注册链接点击事件
      $('#registerLink').click(function () {
        layer.msg('跳转到注册页面');
        // 这里可以添加跳转到注册页面的逻辑
      });

      // 忘记密码链接点击事件（当前已是忘记密码页面，可根据需求调整）
      $('#forgetPwdLink').click(function () {
        layer.msg('当前已是忘记密码页面');
      });
    });
  </script>
</body>

</html>